<template>
  <div class="my">
    <div class="main">
      <div class="top">
        <van-row type="flex" justify="space-between">
          <van-col span="6">
            <div class="title">我的</div>
          </van-col>
          <van-col span="9">
            <van-icon name="guide-o" size="25" />
            <van-icon name="smile-o" size="25" />
            <span @click="goOut" class="goout">退出登录</span>
            <!-- <van-icon name="apps-o" @click="goOut" size="25" /> -->
          </van-col>
        </van-row>
      </div>
      <div class="search">
        <div class="inp">
          <form action="/">
            <van-search v-model="value" shape="round" background="#1B1344" placeholder="请输入搜索关键词" />
          </form>
        </div>
      </div>
      <div class="login">
        <div class="yesLogin">
          <van-card :thumb="userData.avatarUrl">
            <template #desc>
              <div class="left-right">
                <!-- 获取登录状态，用来判断用户能不能看用户详情 -->
                <div class="left">
                  <div class="login-name" @click="goLogins">{{ userData.nickname }}</div>
                  <div class="login-icons">
                    <van-icon name="diamond-o" size="18" />
                  </div>
                </div>
                <div class="right">
                  <div class="rightItem">
                    <div class="rightNum" @click="getFollowList">{{ userData.follows }}</div>
                    <div>关注</div>
                  </div>
                  <div class="rightItem">
                    <div class="rightNum">0</div>
                    <div>新歌</div>
                  </div>
                </div>
              </div>
            </template>
          </van-card>

        </div>


        <div class="thr">
          <div>
            活动中心
          </div>
          <div>
            会员中心
          </div>
          <div>
            每日签到
          </div>
        </div>
      </div>

      <div class="notice">
        <van-notice-bar mode="closeable">技术是开发它的人的共同灵魂。</van-notice-bar>
      </div>
      <div class="my-has-some">
        <van-grid :border="false" :column-num="4">
          <van-grid-item v-for="(item, index) in somePic" :key="index" @click="inquire(index)">
            <div class="img">
              <img class="auto-img" :src="item.pic" alt="">
            </div>
            <div class="text">{{ item.title }}</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="recently">
        <picTextTop leftText="最近播放"></picTextTop>
        <div class="recentlyPic">
          <van-swipe :loop="false" :width="100">
            <div v-for="(item, index) in recenttlyData" :key="index">
              <van-swipe-item>
                <picText :PicTextData="item"></picText>
              </van-swipe-item>
            </div>

          </van-swipe>
        </div>
      </div>
      <div class="mySongList">
        <van-tabs v-model="active" color="#4CD3D5" background="#160742" title-active-color="#4CD3D5"
          title-inactive-color="#fff">
          <van-tab title="自建歌单">
            <van-card
              thumb="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F010e3959428072a8012193a30452e5.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674580619&t=7fe6e9e680799f1aaa5821db791ae614">
              <template #desc>
                <div class="content">
                  没有自建歌单
                </div>
              </template>
            </van-card>
          </van-tab>
          <van-tab title="收藏歌单">
            <van-card :thumb="item.coverImgUrl" v-for="(item, index) in likeSongList" :key="index">
              <template #desc>
                <div class="content">
                  {{ item.name }}
                </div>
              </template>
            </van-card>
          </van-tab>
        </van-tabs>

      </div>

      <div class="intellectRecommend">
        <picTextTop leftText="智能分类"></picTextTop>
        <div class="recentlyPic">
          <van-swipe :loop="false" :width="100">
            <van-swipe-item>
              <picText></picText>
            </van-swipe-item>
            <van-swipe-item>
              <picText></picText>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="peopleLike">
        <picTextTop leftText="大家都爱听"></picTextTop>
        <div class="recentlyPic">
          <van-swipe :loop="false" :width="100">
            <van-swipe-item>
              <picText></picText>
            </van-swipe-item>
            <van-swipe-item>
              <picText></picText>
            </van-swipe-item>
            <van-swipe-item>
              <picText></picText>
            </van-swipe-item>
            <van-swipe-item>
              <picText></picText>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="find">
        <div>发现更多内容</div>
        <div class="icon"><van-icon name="arrow" size="12" color="#8A879D" /></div>
      </div>
    </div>
  </div>
</template>

<script>
import somePic from "../../public/json/someType.json"
import picText from "@/components/picText.vue";
import picTextTop from "@/components/picTextTop.vue";
import { mapMutations } from 'vuex';
import { Toast } from 'vant';
export default {
  name: 'My',
  data() {
    return {
      somePic,
      value: "",
      active: 0,
      status: "",
      perSonMsg: "",
      perName: "",
      userId: "",
      loginInfo1: "",
      loginInfo2: "",
      followListNum: "",
      likeSongList: "",
      recenttlyData: "",
      img: "../../public/images/login/空.png",
      userData:
      {
        "city": 0,
        "nickname": "点击登录账号",
        "userId": 0,
        "avatarUrl": "http://p1.music.126.net/SUeqMM8HOIpHv9Nhl9qt9w==/109951165647004069.jpg",
        "follows": 0
      }

    }
  },
  components: {
    picText,
    picTextTop
  },
  created() {

    // 查看用户是否登录
    this.loginInfo1 = window.localStorage.getItem("loginInfo")

    if (this.loginInfo1) {

      this.loginInfo2 = JSON.parse(this.loginInfo1)

      if (this.loginInfo2.length > 0) {

        this.userData.nickname = this.loginInfo2[0].nickname
        this.userData.userId = this.loginInfo2[0].userId
      }


    } else {
      this.loginInfo2 = ""
    }

    // 渲染收藏歌单信息
    // this.getLikeSongList()
    // this.getRecentlySong()



  },
  methods: {
    ...mapMutations(['setIsMain']),
    // // 获取登录的用户详情信息

    // // 获取用户关注列表
    getFollowList() {
      if (this.loginInfo2.length <= 0) {
        Toast('您还未登录')
        this.setIsMain(false)
        this.$router.push({ name: "GoLogin" })
      }
      else {
        let userId = this.loginInfo2[0].userId

        this.setIsMain(false)
        this.$router.push({ name: "FollowListDetail", params: { userId } })
      }


    },
    // 获取登录状态
    goLogins() {
      if (this.loginInfo2.length > 0) {

        let userId = this.loginInfo2[0].userId
        this.setIsMain(false)
        this.$router.push({ name: "PersonDetail", params: { userId } })
      } else {

        this.setIsMain(false)
        this.$router.push({ name: "GoLogin" })
      }
    },
    // 退出登录
    goOut() {
      this.axios({
        method: "get",
        url: "/logout"
      }).then(res => {

        this.userData =
        {
          "city": 0,
          "nickname": "点击登录账号",
          "userId": 0,
          "avatarUrl": "http://p1.music.126.net/SUeqMM8HOIpHv9Nhl9qt9w==/109951165647004069.jpg",
          "follows": 0
        }
        this.loginInfo = []
        localStorage.setItem("loginInfo", JSON.stringify(this.loginInfo))
      })
    },
    // 查看收藏、本地、有声、已购
    inquire(index) {
      if (index === 0) {

        let loginInfo = window.localStorage.getItem('loginInfo')
        if (loginInfo) {
          let loginInfo2 = JSON.parse(loginInfo)

          if (loginInfo2.length !== 0) {
            this.setIsMain(false)
            this.$router.push({ name: "Like" })
          } else {
            Toast('您还未登录，请登录')
            this.setIsMain(false)
            this.$router.push({ name: "GoLogin" })
          }
        }
        else {
          Toast('您还未登录，请登录')
          this.setIsMain(false)
          this.$router.push({ name: "GoLogin" })
        }

      }
    },
    // 查看收藏歌单
    getLikeSongList() {
      let loginInfo = window.localStorage.getItem('loginInfo')
      let likeSongList = window.localStorage.getItem('likeSongList')
      if (loginInfo) {
        let loginInfo2 = JSON.parse(loginInfo)
        if (loginInfo2.length !== 0) {
          if (likeSongList) {
            let likeSongList2 = JSON.parse(likeSongList)
            this.likeSongList = likeSongList2


          } else {
            Toast('请登录后查看')
            this.$router.push({ name: "GoLogin" })
          }

        }
      }

    },
    // 查看最近播放歌单、歌曲
    getRecentlySong() {
      let loginInfo = window.localStorage.getItem('loginInfo')
      let songPlayList = window.localStorage.getItem('songPlayList')
      if (loginInfo) {
        let loginInfo2 = JSON.parse(loginInfo)
        if (loginInfo2.length !== 0) {
          if (songPlayList) {
            let songPlayList2 = JSON.parse(songPlayList)
            this.recenttlyData = songPlayList2


          }
        } else {
          Toast('请登录后查看')
          // this.$router.push({ name: "GoLogin" })
        }

      }
    },

  }
}
</script>

<style lang="less" scoped>
.my {
  color: #FFFEFF;
  background-color: #160742;
  padding-bottom: 100px;

  .goout {
    line-height: 55px;
    margin-left: 5px;
    font-size: 15px;
  }


  .main {
    margin: 0px 3%;
    width: 94%;
    padding-bottom: 150px;
  }

  .top {
    height: 50px;
    line-height: 50px;

    .title {
      // margin-left: 10px;
      font-size: 16px;
      font-weight: bold;
    }

    i {
      margin-right: 5px;
    }

    .van-col--6:last-child {
      width: 33%;

      .van-icon {
        margin: 13px 8px 13px 8px;
      }

      .van-icon:last-child {
        margin: 13px 0px 13px 8px;
      }
    }

  }

  .search {

    // width: 94%;
    // margin: 10px 3%;
    .inp {
      width: 100%;

      /deep/.van-search {
        padding: 0px 0px;
        height: 30px;
      }

      .van-cell {
        height: 30px;
        color: #fff;
      }

      .van-search__content {
        background-color: #271A4F;
        padding-left: 0px;
      }

      /deep/.van-field__control {
        color: #fff;
      }

      /deep/.van-field__left-icon {
        margin-left: 10px;
        margin-right: 10px;
      }

    }

    .icon {
      width: 25px;
    }
  }

  .login {
    margin-top: 15px;
    height: 105px;
    background-color: #271A4F;
    border-radius: 10px;

    .van-card {

      height: 80%;
      padding: 0px;
      background-color: transparent;

      .van-card__thumb {
        margin-left: 10px;
        margin-top: 15px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
      }

      .van-card__thumb img {
        width: 55%;
        border-radius: 50%;
        overflow: hidden;
      }

      .van-card__title {
        color: #fff;
      }


      /deep/.van-card__content {
        color: #fff;
        height: 60px;
      }
    }

    .yesLogin {
      height: 80px;

      .left-right {
        height: 60px;
        margin-top: 10px;
        margin-left: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .login-name {
          font-weight: bold;
          margin-top: -5px;
        }

        .login-icons {
          margin-top: 8px;
        }

        .right {
          width: 35%;
          align-items: center;
          display: flex;
          text-align: center;

          .rightItem {
            margin: 0px 10px;

            .rightNum {
              font-size: 16px;
              margin: 5px 0px;
            }
          }
        }
      }
    }

    .thr {
      width: 95%;
      margin: 0px 2% 15px 2%;
      // padding-bottom: 15px;
      display: flex;
      justify-content: space-between;
    }
  }

  .notice {
    margin-top: 15px;
    height: 30px;

    .van-notice-bar {
      height: 100%;
      background-color: #271A4F;
      color: #fff;
      font-size: 10px;
    }
  }

  .my-has-some {
    margin: 20px 0px;
    width: 100%;

    .text {
      margin-top: 10px;
    }

    .img {
      width: 25px;
    }

    /deep/.van-grid-item__content {
      background-color: #160742;
      color: #fff;
    }
  }


  .recentlyTitle {
    display: flex;
    justify-content: space-between;

    .left {
      font-size: 16px;
    }
  }

  .recentlyPic {
    margin-top: 10px;

    .van-swipe-item {
      overflow: hidden;
      margin: 0px 10px 0px 0px;

    }

    /deep/.van-swipe__indicators {
      display: none;
    }

  }

  .mySongList {
    .item {
      height: 80px;

      .left_right {
        display: flex;
        align-items: center;
      }

      .likeImg {
        width: 50px;
      }

    }

    /deep/.van-tab {
      // webkit-flex:0;
      flex: none;
      padding: 0px;
    }

    /deep/.van-tab__text {
      margin-right: 10px;
    }

    .van-card {
      height: 80px;
      background-color: #160742;

    }

    .content {
      margin-top: 20px;
      color: #fff;
    }

    .van-card__thumb {
      height: 70px;
      width: 70px;
    }

    .van-card__content {
      min-height: auto;
    }


  }

  .intellectRecommend {
    margin-top: 30px;
  }

  /deep/.van-nav-bar__left,
  .van-nav-bar__right {
    padding: 0px;
  }

  .find {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    align-items: center;

    .icon {
      margin-top: 2px;
    }

  }
}
</style>